<template>
	<div class="zhifu">
		<div class="p_Login_Return">
			<a href="javascript:history.back(-1)">
				<img src="../../assets/login/返回.png" />
			</a>
			<span>支付方式</span>
		</div>
		<div class="zhifu_span1">支付方式</div>
		<div class="zhifu_xuankuang">
			<span v-for="item in arr">{{item}}</span>
		</div>
		<a href="javascript:history.back(-1)">
			<button class="zhifu_btn">确定</button>
		</a>
	</div>
</template>

<script>
	export default {
		name: "zhifufangshi",
		data() {
			return {
				arr: ["在线支付", "分期付款", "公司转账", "门店付款", "邮局汇款"]
			}
		},
		mounted() {
			var _this = this;
			$(".zhifu_xuankuang span").click(function() {
				$(".zhifu_xuankuang span").css({
					"color": "grey",
					"border": "1px solid gainsboro"
				});

				$(this).css({
					"color": "red",
					"border": "1px solid red"
				});
				var txt = $(this).text();
				_this.$store.commit('txt',txt);
			})
		}
	}
</script>

<style scoped>
	.p_Login_Return {
		border-bottom: 1px solid gainsboro;
	}
	
	.p_Login_Return img {
		width: 10%;
		margin: 2%;
	}
	
	.p_Login_Return span {
		display: inline-block;
		margin-left: 7rem;
		width: 50%;
		vertical-align: 1rem;
		font-size: 2rem;
	}
	
	.zhifu_span1 {
		padding-left: 5%;
		line-height: 3rem;
	}
	
	.zhifu_xuankuang span {
		display: inline-block;
		width: 25%;
		height: 3rem;
		border: 1px solid gainsboro;
		text-align: center;
		line-height: 3rem;
		margin: 3%;
		color: grey;
	}
	.zhifu_btn{
		line-height: 5rem;
		font-size: 2rem;
		width: 100%;
		background-color: rgb(255, 129, 173);
		color: white;
		border: none;
		outline: none;
		color: white;
		margin-bottom: 0px;
		margin-top: 96%;
	}
</style>